<template>
  <div class="page-content">
    <dsq-table
      :tableData="tableData"
      :tableColumnConfig="tableColumnConfig"
      @selectionChange="selectionChange"
      :headerTitle="tableTitle"
      :totalData="totalData"
      v-model:page="pageInfo"
      :showIndexColumn="showIndexColumn"
      :showSelectColumn="showSelectColumn"
      :childrenProps="childrenProps"
    >
      <template #headerRefresh>
        <el-button
          type="primary"
          size="medium"
          v-if="isCreate"
          @click="handleNewClick"
          >新建用户</el-button
        >
        <el-button>
          <el-icon>
            <refresh />
          </el-icon>
        </el-button>
      </template>
      <template #enable="tabContent">
        <el-button
          plain
          size="mini"
          :type="
            tabContent.row['enable'] || tabContent.row['status']
              ? 'success'
              : 'danger'
          "
          >{{
            tabContent.row['enable'] || tabContent.row['status']
              ? '启用'
              : '禁用'
          }}</el-button
        >
      </template>
      <template #createAt="tabContent">
        {{ $filters.formatUtcTime(tabContent.row['createAt']) }}
      </template>
      <template #updateAt="tabContent">
        {{ $filters.formatUtcTime(tabContent.row['updateAt']) }}
      </template>
      <template #control="tabContent">
        <el-button
          size="mini"
          type="text"
          v-if="isUpdate"
          @click="handleEditClick(tabContent.row)"
        >
          <el-icon>
            <edit />
          </el-icon>
          编辑</el-button
        >
        <el-button
          size="mini"
          type="text"
          v-if="isDelete"
          @click="handleDeleteClick(tabContent.row)"
        >
          <el-icon>
            <delete />
          </el-icon>
          删除</el-button
        >
      </template>
      <template
        v-for="item in otherSlotName"
        :key="item.prop"
        #[item.slotName]="tableConetnet"
      >
        <template v-if="item.slotName">
          <slot :name="item.prop" :row="tableConetnet.row[item.slotName]">
          </slot>
        </template>
      </template>
    </dsq-table>
  </div>
</template>

<script setup lang="ts">
import {
  defineProps,
  computed,
  defineExpose,
  ref,
  watch,
  defineEmits
} from 'vue';
import dsqTable from '@/base-ui/table';
const props = defineProps<{
  tableColumnConfig: any[];
  tableTitle: string;
  pathName: string;
  showIndexColumn?: boolean;
  showSelectColumn?: boolean;
  childrenProps?: any;
}>();
/* 列表数据选中 */
const selectionChange = (payload: any) => {
  console.log(payload);
};
/* 请求用户列表数据 */
import { useStore } from '@/store/index';
const store = useStore();
let pageInfo = ref({
  currentPageNum: 1,
  currentPageSum: 10
});
watch(pageInfo, (newValue) => {
  getTableData();
});
const getTableData = (payload?: any) => {
  // if (!isQuery) {
  //   return false;
  // }
  store.dispatch('system/getPageListAction', {
    pagePath: props.pathName,
    queryInfo: {
      offset:
        (pageInfo.value.currentPageNum - 1) * pageInfo.value.currentPageSum,
      size: pageInfo.value.currentPageSum,
      ...payload
    }
  });
};
getTableData();
defineExpose({
  getTableData
});
/* 获取列表数据 */
const tableData = computed(() => {
  return store.getters['system/pageListData'](props.pathName);
});
const totalData = computed(() => {
  return store.getters['system/pageCountData'](props.pathName);
});
/* 获取除特殊插槽的数组 */
const otherSlotName = props.tableColumnConfig.filter((item) => {
  if (item.slotName == 'createAt') return false;
  if (item.slotName == 'updateAt') return false;
  if (item.slotName == 'enable') return false;
  if (item.slotName == 'control') return false;
  return item;
});
/* 权限操作 */
import { userPermission } from '@/hooks/usePermission';
const isCreate = userPermission(props.pathName, 'create');
const isUpdate = userPermission(props.pathName, 'update');
const isDelete = userPermission(props.pathName, 'delete');
const isQuery = userPermission(props.pathName, 'query');
/* 点击删除操作 */
const handleDeleteClick = (item: any) => {
  store.dispatch('system/deletePageListAction', {
    pagePath: props.pathName,
    id: item.id
  });
};
/* 新建和编辑按钮的操作 */
const emit = defineEmits(['editClick', 'newClick']);
const handleEditClick = (item: any) => {
  emit('editClick', item);
};
const handleNewClick = () => {
  emit('newClick');
};
</script>

<style scoped>
.pageContent {
  width: 100%;
  height: 100%;
  margin-top: 20px;
  padding: 20px;
  /* background-color: #fff; */
}
</style>
